<template>
  <view class="study">
    <header-vue :searchStatus="true" bgColor="transparent">
      <template v-slot:search>
        <view class="flex search-box margin32">
          <i class="iconfont icon-search font40" @click="onSearch"></i>
          <input
            class="flex start font28 input"
            v-model="searchKeyword"
            placeholder="搜索"
            confirm-type="search"
            @confirm="onSearch"
          />
        </view>
      </template>
    </header-vue>
    <view class="study-content">
      <view class="nav-con flex" ref="navH" id="navH">
        <view
          class="nav-item font30"
          v-for="item in navsList"
          :key="item.id"
          :class="[item.id == navActive ? 'active' : '']"
          @click="navClickEvent(item.id)"
          >{{ item.name }}</view
        >
      </view>

      <view class="study-list">
        <view class="study-list-item" v-for="item in list" @click="onDetailClick(item.id)" :key="item.id">
          <view class="img">
            <u-image :src="''" mode="aspectFill" width="100%" height="176rpx" />
          </view>
          <view class="content">
            <view class="content-top">
              <view class="title">{{item.title}}</view>
              <view class="des"
                >{{item.des}}</view
              >
            </view>
            <view class="content-bottom">{{item.time}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  data() {
    return {
      searchKeyword: "",
      navActive: 0,
			list:[
				{
					id:0,
					title:'厨房油污清理小妙招',
					des:'教你如何才能更快速的清理厨房油污内容内容内容内容内容内容',
					time:'时长：56分钟',
					img:''
				},
				{
					id:1,
					title:'空调维修小知识',
					des:'如何才能快速的找出空调哪里坏了内容内容内容内容内容内容',
					time:'时长：56分钟',
					img:''
				},
				{
					id:2,
					title:'胎儿的哭声',
					des:'教你分辨胎儿每种哭声的意思，快速了解胎儿需求内容内容内容内容内容内容',
					time:'时长：56分钟',
					img:''
				}

			],
      navsList: [
        {
          id: 0,
          name: "全部",
        },
        {
          id: 1,
          name: "清洗类",
        },
        {
          id: 2,
          name: "维修类",
        },
        {
          id: 3,
          name: "服务类",
        },
      ],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    onDetailClick(id) {
      console.log(id);
      uni.navigateTo({
        url: "/views-master/study/course-detail?id=" + id,
      });
    },
    onSearch() {
      console.log("onSearch");
    },
    navClickEvent(id) {
      this.navActive = id;
    },
  },
};
</script>

<style lang="scss" scoped>
.study {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    #b5cfff 0%,
    rgba(246, 249, 255, 0.2) 30%,
    #f6f9ff 100%
  );
  .margin32 {
    margin: 0 32rpx;
  }
  .search-box {
    height: 72rpx;
    border-radius: 60rpx;
    padding: 0 28rpx;
    margin-bottom: 28rpx;
    width: 100%;
    background: #ffff;

    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
    .iconfont {
      color: $uni-text-color-grey;
      margin-right: 20rpx;
    }

    .input {
      width: 100%;
      height: 100%;
      color: $uni-text-color-grey;
      border: none;
      outline: none;
      background: transparent;
    }
  }
  .study-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    .nav-con {
      padding: 0 32rpx;
      height: 65rpx;
      justify-content: flex-start;

      .nav-item {
        font-size: 28rpx;
        color: #666;
        margin-right: 60rpx;
      }

      .active {
        position: relative;
        font-weight: bold;
        font-size: 30rpx;
        color: #333;

        &::after {
          content: "";
          position: absolute;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 24rpx;
          height: 6rpx;
          background: #0785cf;
          border-radius: 60rpx 60rpx 60rpx 60rpx;
        }
      }
    }
    .study-list {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      box-sizing: border-box;

      padding: 28rpx 32rpx 32rpx 32rpx;
      .study-list-item {
        width: 100%;
        height: 216rpx;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 20rpx;
        display: flex;
        position: relative;
        overflow: hidden;
				margin-bottom: 28rpx;
        .img {
          width: 200rpx;
          height: 100%;
          overflow: hidden;
          box-sizing: border-box;

          border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
        .content {
          box-sizing: border-box;
          padding-left: 28rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          .content-top {
            .title {
              font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
              text-align: left;
              font-style: normal;
              text-transform: none;
              margin-bottom: 8rpx;
            }
            .des {
              font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
              font-weight: 400;
              font-size: 20rpx;
              color: #999999;
              text-align: justified;
              font-style: normal;
              text-transform: none;
            }
          }
          .content-bottom {
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 24rpx;
            color: #df9824;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }
}
</style>
